<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '240px'
    },
    data:{
        type:Object,
        default:'1600'
    }
  },
  data() {
    return {
      chart: null,
        timer: 1.5 ,//刷新频率
        max :1600 //最大馆藏量
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  watch:{
      data: {
          deep: true,
          handler(val) {
              this.setOptions(val)
          }
      }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.data)
    },
    setOptions(data) {
      this.chart.setOption({
        angleAxis: {
            show: false,
            max: parseInt(data.num) * 3 / 2, //这里将极坐标最大值转换成仪表盘的最大值，(360度除以240度)
            type: 'value',
            startAngle: 210, //极坐标初始角度，从第一象限算起，大约在7-8点钟角度之间
            splitLine: {
                show: false //隐藏坐标
            }
        },
        barMaxWidth: 10, //圆环宽度
        radiusAxis: { //隐藏坐标
            show: false,
            type: 'category',
        },
        polar: { //设置圆环位置和大小
            center: ['50%', '36%'],
            radius: '160'
        },
        series: [{
                type: 'bar',
                data: [{ //上层圆环，用于显示真实数据
                    value: data.num,
                    itemStyle: {
                        color: { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1, //从左到右 0-1
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: '#25bec5' // 0% 处的颜色
                            }, {
                                offset: .5,
                                color: '#6bcc19' // 100% 处的颜色
                            }, {
                                offset: 1,
                                color: '#d38432' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(255, 255, 255, 0.2)', //加白色阴影产生高亮效果
                        shadowBlur: 10
                    }
                }],
                barGap: '-100%', //柱间距离,用来将上下两层圆环重合
                coordinateSystem: 'polar', //类型，极坐标
                roundCap: true, //顶端圆角
                z: 2 //圆环层级，和zindex相似
            }, { //下层圆环，用于显示最大值
                type: 'bar',
                data: [{
                    value: parseInt(data.num),
                    itemStyle: {
                        color: '#265195',
                        shadowColor: 'rgba(0, 0, 0, 0.2)', //加白色阴影产生高亮效果
                        shadowBlur: 5,
                        shadowOffsetY: 2
                    }
                }],
                barGap: '-100%', //柱间距离,用来将上下两层圆环重合
                coordinateSystem: 'polar', //类型，极坐标
                roundCap: true, //顶端圆角
                z: 1 //圆环层级，和zindex相似
            },
            { //仪表盘
                type: 'gauge',
                radius: '60%',
                startAngle: 180, //起始角度，同极坐标
                endAngle: 0, //终止角度，同极坐标
                max: parseInt(data.num),
                splitNumber: 6, //分割线个数（除原点外）
                axisLine: { // 坐标轴线
                    show: false
                },
                pointer: {
                    show: false
                },
                axisLabel: {
                    // 坐标轴数字
                    textStyle: {
                        fontSize: 8,
                        color: "#13B5FC"
                    },
                    show:false

                },
                axisTick: { // 坐标轴标记
                    length: 10,
                    lineStyle: {
                        color: "#13B5FC"
                    },
                    show:false
                },
                splitLine: { // 分隔线
                    length: 5,
                    lineStyle: {
                        width: 1,
                    },
                    show:false
                },
                title: { //标题，显示'馆藏量'
                    textStyle: {
                        color: '#b6e6ff',
                        shadowColor: '#fff',
                        fontSize: 14
                    },
                    offsetCenter: ["0", '0'] //位置偏移
                },
                detail: { //仪表盘数值
                    formatter: function (params) {
                        var name = data.num.toString()
                        var list = ''
                        for (var i = 0; i < name.length; i++) {
                            list += '{value|' + name[i] + '}' //每个数字用border隔开
                            if (i !== name.length - 1) {
                                list += '{margin|}' //添加margin值
                            }
                        }
                        return [list]
                    },
                    offsetCenter: ["0", '-60%'],
                    rich: { //编辑富文本样式
                        value: {
                            width: 20,
                            height: 40,
                            borderColor: '#02A0F0',
                            borderWidth: 0,
                            borderRadius: 5,
                            lineHeight: parseInt(data.num),
                            fontSize: 36,
                            padding: [0, 0, 1, 0],
                            fontWeight:'bold',
                            textShadowColor:'#00f2ff',
                            textShadowBlur:30,
                            textShadowOffsetX:'0',
                            textShadowOffsetY:'0',
                            color: '#fff',
                            shadowColor: 'rgb(2,157,239)',
                            shadowBlur: 5
                        },
                        margin: {
                            width: 8,
                            height: 42,
                        }
                    }

                },
                data: [{
                    value: data.num,
                    name: data.name
                }]
            }
        ]
      })
    }
  }
}
</script>
